<template>
    <div class="common-layout">

        <el-container> 
            <!-- 头部 -->
                <el-header>
                
                    <div>
                    <img src="@/assets/platform_logo.png" alt="" />
                    <span >个人运动平台</span>
                    </div>
                    <el-button type="info" @click="logout">安全退出</el-button>
                </el-header>

        <el-container>
            <!-- 侧边栏 -->
            <el-aside :width="isCollapse ? '64px' : '200px'">
                <div class="toggle-Button" @click="toggleCollapase">
                    |||
                </div>

                <!-- 菜单列表  -->
                <el-menu background-color="#4A5064" text-color="#fff" active-text-color="#409eff" router
                    :collapse="isCollapse" :collapse-transition="false" unique-opened :default-active="activePath"
                    >
                    <!-- 一级菜单 -->
                    <el-sub-menu :index="item.id" v-for="item in menuList" :key="item.id">
                        <template #title>
                            <!-- elementPlus图标 -->
                            <!--   <el-icon >
                                    <component :is="item.icon"></component>
                                </el-icon>   -->

                            <!-- 阿里巴巴图标 -->
                            <i :class="'iconfont ' + item.icon"></i>
                            <!-- 菜单标题 -->
                            <span style="margin-right: 8px;"></span>
                            <span>{{ item.title }}</span>
                        </template>

                        <!-- 二级菜单 -->
                        <el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.id"
                            @click="saveCurrentPath(subItem.path)">
                            <!-- elementPlus图标 -->
                            <!-- <el-icon>
                                       <component :is="item.icon"></component>
                                </el-icon> -->

                            <!-- 阿里巴巴图标 -->
                            <i :class="'iconfont ' + subItem.icon"></i>
                            <!-- 菜单标题 -->
                            <span style="margin-right: 8px;"></span>
                            <span>{{ subItem.title }}</span>
                        </el-menu-item>



                    </el-sub-menu>

                </el-menu>
            </el-aside>

            <!-- 右边区域-->
            <el-container>
                
                <!-- 主体内容 -->
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>

                </el-container>
    </div>
    
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import router from '@/router'
import { getMenuListApi, logoutApi } from '@/api/home'


//菜单列表
const menuList = ref([])
// 是否折叠侧边栏
const isCollapse = ref(true)
// 当前激活的菜单路径
const activePath = ref('')


/**
 * 获取菜单列表
 */
const getMenuList = async () => {
    const result = await getMenuListApi()
    if (result.code !== 200) {
        ElMessage.error("111")
        return
    }
    menuList.value = result.data
}

/**
 * 挂载时获取菜单列表
 */
onMounted(() => {
    // 获取菜单列表
    getMenuList()
    // 从本地存储中获取上次打开的菜单路径
    const savedPath = window.sessionStorage.getItem('activePath')
    if (savedPath) {
        activePath.value = savedPath
    }
})

/**
 * 退出登录
 */
const logout = async () => {
    const result = await logoutApi()
    if (result.code !== 200) {
        ElMessage.error(result.msg)
        return
    } else {
        localStorage.removeItem('userToken') // 清除token
        sessionStorage.removeItem('activePath')// 清除激活路径
        ElMessage.success('已安全退出!')
        router.push('/login') // 跳转到登录页面
    }
}


/**
 * 切换侧边栏折叠状态
 */
const toggleCollapase = () => {
    isCollapse.value = !isCollapse.value
}

/**
 * 保存当前激活的菜单路径
 */
const saveCurrentPath = (path) => {
    activePath.value = path
    window.sessionStorage.setItem('activePath', path)
}

</script>

<style lang="less" scoped>
.common-layout {
    height: 100%;
}

// 全局容器样式
.el-container {
    height: 100%;
}

// 头部样式
.el-header {
    background-image: linear-gradient(to right, #00547d, #007fa4, #00aaa0, #00d072, #a8eb12);//渐变
    display: flex; // 水平布局
    justify-content:space-between;//两端靠边
    padding-left: 0%; // 左侧边距
    color: #fff; // 字体颜色
    font-size: 20px; // 字体大小
    align-items: center; // 垂直居中
    letter-spacing: 0.2em; // 字符间距

    div {
        display: flex;
        align-items: center; // 水平居中

        span {
            margin-left: 15px; // 左侧边距
            font-weight: bold; // 加粗
            font-size: 18px; // 字体大小
            color: #ffffff; // 字体颜色
        }

    }

}

// 侧边栏样式
.el-aside {
    background-color: #4b4f64;

}

// 主体内容样式
.el-main {
    background-color: rgb(249, 249, 249);
}

// 菜单样式
.el-menu {
    border-right: none; // 去掉默认的边框
}

// 图标logo样式
img {
    width: 40px;
    margin-left: 9px
}



//|||伸缩按钮样式
.toggle-Button {
    cursor: pointer; // 鼠标指针变为手型
    font-size: 10px; // 字体大小
    line-height: 24px; // 行高
    text-align: center; // 文本居中
    color: #fff; // 字体颜色
    background-color: #4c4e64;
    &:hover {
        background-color: #454a50; // 鼠标悬停时背景色变化
    }
}
</style>